import { useRequest } from "ahooks"
import React, { FC, useState } from "react"
import { Typography, Spin, Table, Pagination } from "antd"
import { useParams } from "react-router-dom"
import { getQuestionStatListService } from "../../../../services/stat"
import useGetComponentInfo from "../../../../hooks/useGetComponentInfo"
import { STAT_PAGE_SIZE } from "../../../../constant"
import styles from "./PageStat.module.scss"

const { Title } = Typography

type PropsType = {
    selectedComponentId: string
    setSelectedComponentId: (id: string) => void
    setSelectedComponentType: (type: string) => void
}

const PageStat: FC<PropsType> = (props: PropsType) => {
    const { selectedComponentId, setSelectedComponentId, setSelectedComponentType } = props

    const { id = "" } = useParams()

    // 当前页
    const [page, setPage] = useState(1)
    const [pageSize, setPageSize] = useState(STAT_PAGE_SIZE)

    const [total, setTotal] = useState(0)
    const [list, setList] = useState([])

    const { loading } = useRequest(
        async () => {
            const res = await getQuestionStatListService(id, { page, pageSize })
            return res
        },
        {
            // 更新依赖项
            refreshDeps: [id, page, pageSize],
            // res就是上面的返回值
            onSuccess(res) {
                // 就是请求的响应结果
                const { total, list = [] } = res
                setTotal(total)
                setList(list)
            }
        }
    )

    const { componentList } = useGetComponentInfo()
    const columns = componentList.map(c => {
        const { fe_id, title, props = {}, type } = c
        // 优先使用props里面的title，props没有title了就获取外面的title
        // !强制不使用类型检查
        const colTitle = props!.title || title

        return {
            // 可以是string的字符串，也可以是html、css代码片段
            // title: colTitle,
            title: (
                <div
                    style={{ cursor: "pointer" }}
                    onClick={() => {
                        setSelectedComponentId(fe_id)
                        setSelectedComponentType(type)
                    }}
                >
                    {/* inherit是继承父元素的样式 */}
                    <span style={{ color: fe_id === selectedComponentId ? "#1890ff" : "inherit" }}>{colTitle}</span>
                </div>
            ),
            dataIndex: fe_id
        }
    })

    // pagination={false}不使用表格的默认分页
    // 方式1：设置rouKey ，不需要给list 设置key了
    // const TableElem = <Table columns={columns} dataSource={list} pagination={false} rowKey={(q: any) => q._id}></Table>

    // 方式2：如果不设置rowKey  就需要给list设置一个key
    const dataSource = list.map((i: any) => ({ ...i, key: i._id }))
    const TableElem = (
        <>
            <Table columns={columns} dataSource={dataSource} pagination={false}></Table>
            <div style={{ marginTop: "35px" }}>
                <Pagination
                    align="center"
                    total={total}
                    pageSize={pageSize}
                    current={page}
                    // 切换分页和分页大小
                    onChange={(page, pageSize) => {
                        setPage(page)
                        setPageSize(pageSize)
                    }}

                    // 切换分页大小
                    // onShowSizeChange={(page, pageSize) => {
                    //     setPage(page)
                    //     setPageSize(pageSize)
                    // }}
                />
            </div>
        </>
    )
    return (
        <div className={styles.container}>
            <Title level={3}>答卷数量：{!loading && total}</Title>
            {loading && (
                <div style={{ textAlign: "center" }}>
                    <Spin />
                </div>
            )}
            {!loading && TableElem}
        </div>
    )
}

export default PageStat
